<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>宝贝投-P2P平台</title>
	<!-- links begin -->
	<link rel="shortcut icon" href="favicon.ico" />
	<link rel="stylesheet" href="js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css" />
	<link rel="stylesheet" href="css/core.css" type="text/css" />
	<script type="text/javascript" src="js/jquery/jquery-2.1.3.js"></script>
	<script type="text/javascript" src="js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
	<script type="text/javascript" src="js/jquery.bootstrap.js"></script>
	<!-- links end -->
	<link rel="stylesheet" type="text/css" href="js/plugins/flipcountdown/jquery.flipcountdown.css" />
	<script type="text/javascript" src="js/plugins/flipcountdown/jquery.flipcountdown.js"></script>
	<script type="text/javascript" src="js/plugins/jquery.form.js"></script>
	<script type="text/javascript" src="js/plugins/jquery-validation/jquery.validate.js"></script>

	<script type="text/javascript" src="js/common.js"></script>

	<style type="text/css">
		.el-userhead{
			width: 100px;
			height: 100px;
			display: block;
			margin: 0px auto;

		}
		.muted{
			color: #999;
		}
		.text-info{
			color: #09d;
		}
	</style>
</head>
<body>
<!-- 网页顶部 begin -->
<div class="el-header"></div>
<!-- 网页顶部 end -->

<!-- 网页导航 begin -->
<div class="el-navbar navbar navbar-default"></div>
<!-- 网页导航 end -->

<div class="container" style="margin-top: 10px;">

	<div class="row">
		<div class="col-sm-2"></div>
		<div class="col-sm-6">
			<h3 class="text-info" style="margin-top: 0px;">
				<span id="title">加载中...</span>
				<small><label class="label label-primary">信</label></small>
			</h3>
			<div>
				<table width="100%" height="250px">
					<tr>
						<td class="muted">借款人</td>
						<td class="text-info" style="padding-left: 10px;" colspan="3">
							<span id="borrowUsername">加载中...</span>
						</td>
					</tr>
					<tr>
						<td class="muted" width="80px">借款金额</td>
						<td class="text-info" width="120px" style="padding-left: 10px;">
							<span id="borrowAmount">加载中...</span>
						</td>
						<td class="muted" width="80px">年化利率</td>
						<td class="text-info" style="padding-left: 10px;">
							<span id="yearRate">加载中...</span>
						</td>
					</tr>
					<tr>
						<td class="muted ">借款期限</td>
						<td class="text-info" style="padding-left: 10px;">
							<span id="repaymentMonth">加载中...</span>
						</td>
						<td class="muted">总利息</td>
						<td class="text-info" style="padding-left: 10px;">
							<span id="totalInterest">加载中...</span>
						</td>
					</tr>
					<tr>
						<td class="muted">还款方式</td>
						<td class="text-info" style="padding-left: 10px;">
							<span id="repaymentType">加载中...</span>
						</td>
						<td class="muted">最小投标</td>
						<td class="text-info" style="padding-left: 10px;">
							50元
						</td>
					</tr>
					<tr>
						<td class="muted">剩余时间</td>
						<td class="text-info" style="padding-left: 10px;" colspan="3">
							<div id="bidDeadline"></div>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="col-sm-3">
			<table style="height:110px; width:230px;">
				<tr>
					<td class="muted">投标总数</td><td class="text-info" style="padding-left: 10px;">
					<span id="bidNum">加载中...</span>
				</td>
				</tr>
				<tr>
					<td class="muted">还需金额</td>
					<td class="text-info" style="padding-left: 10px;">
						<span id="lastAmount">加载中...</span>
					</td>
				</tr>
				<tr>
					<td  class="muted">投标进度</td>
					<td class="text-info" style="padding-left: 10px;">
						<span id="bidPercent">加载中...</span>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<div style="margin-bottom: 10px;" class="progress">
							<div id="bidProgress" style="width: 0%;" class="progress-bar progress-bar-info progress-bar-striped"></div>
						</div>
					</td>
				</tr>
			</table>
			<h4 id="borrowState" class="text-primary" style="display: none;">加载中...</h4>
			<a id="btnLogin" class="btn btn-danger btn-block" style="font-size: 18px; display: none;" href="javascript:void(0);">
				登录投标
			</a>
			<!-- 投资面板 Begin -->
			<form id="editForm" action="http://localhost:8080/finance/bid/add" method="post" style="display: none;">
				<div class="form-group">
					<input class="form-control input-sm" id="showBidAmount" name="showBidAmount" autocomplete="off" placeholder="请输入投标金额" />
				</div>
				<div class="form-group">
					<input type="hidden" id="bidUserId" name="bidUserId" value="" />
					<input type="hidden" id="bidUsername" name="bidUsername" value="" />
					<input type="hidden" id="borrowId" name="borrowId" value="" />
					<input type="hidden" id="bidAmount" name="bidAmount" value="" />
					<button id="bidBtn" class="btn btn-danger btn-block">
						马上投标
					</button>
				</div>

			</form>
			<!-- 投资面板 End -->

		</div>
	</div>

	<div class="panel panel-default">
		<div class="panel-heading">
			借款人信息
		</div>
		<div class="panel-body">
			<table>
				<tbody>
				<tr>
					<td class="muted text-right" width="140px;">真实姓名</td>
					<td width="150px;" style="padding-left: 10px;" class="text-info">
						<span id="realname">加载中...</span>
					</td>
					<td class="muted text-right" width="140px;">身份证号码</td>
					<td width="150px;" style="padding-left: 10px;" class="text-info">
						<span id="idCardNumber">加载中...</span>
					</td>
					<td class="muted text-right" width="140px;">注册时间</td>
					<td width="150px;" style="padding-left: 10px;" class="text-info">
						<span id="createTime">加载中...</span>
					</td>
				</tr>
				<tr>

					<td class="muted text-right" width="140px;">文化程度</td>
					<td width="150px;" style="padding-left: 10px;" class="text-info">
						<span id="eduBackgroundId">加载中...</span>
					</td>
					<td class="muted text-right" width="140px;">住房条件</td>
					<td width="150px;" style="padding-left: 10px;" class="text-info">
						<span id="houseConditionId">加载中...</span>
					</td>
					<td class="muted text-right">年收入</td>
					<td style="padding-left: 10px;" class="text-info">
						<span id="incomingLevelId">加载中...</span>
					</td>
				</tr>
				</tbody>
			</table>
		</div>
	</div>

	<!-- 还款记录面板 begin -->
	<div class="panel panel-default">
		<div class="panel-heading">
			<div style="font-size: 16px;">还款记录</div>
		</div>
		<div class="panel-body">
			<table id="tblRepayment" class="table table-striped">
				<thead>
				<tr>
					<th>还款时间</th>
					<th>还款期数</th>
					<th>还款金额</th>
					<th>还款状态</th>
				</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
	</div>
	<!-- 还款记录面板 end -->

	<!-- 投资记录面板 begin -->
	<div class="panel panel-default">
		<div class="panel-heading">
			<div style="font-size: 16px;">投标记录</div>
		</div>
		<div class="panel-body">
			<table id="tblBid" class="table table-striped">
				<thead>
				<tr>
					<th>投标人</th>
					<th>投标金额</th>
					<th>投标时间</th>
				</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
	</div>
	<!-- 投资记录面板 end -->
</div>

<!-- 页脚 begin -->
<div class="container-foot-2"></div>
<!-- 页脚 end -->
</body>
<script type="text/javascript">

	// '数据字典项'集合
	let systemDictionaryItemList = new Array();

	// 当前借款信息id
	let borrowId = GetQueryString('id');

	// 当前借款人id
	let borrowUserId = '';

	// 当前借款标状态
	let borrowState = 0;

	// 当前借款还需金额
	let lastAmount = 0;

	// 当前登录用户
	let user;

	//  当前用户钱包信息
	let userWallet;

	$(function(){

		// 加载公共顶部模板
		$('.el-header').load('tpl-head.html');

		// 加载网站导航栏模板
		$('.el-navbar').load('tpl-navbar.html');

		// 加载左侧菜单栏模板
		$('.el-leftmenu').load('tpl-leftmenu.html');

		// 加载页脚模板
		$('.container-foot-2').load('tpl-footer.html');

		// '登录投标'按钮事件
		$('#btnLogin').click(function () {

			// 确保用户登录之后，可以回到该投资页面进行投资操作
			window.location.href = 'login.html?redirectUrl=borrow-info.html?id=' + borrowId;

		});// $('#btnLogin').click();


		// 加载'数据字典项列表'
		loadingSystemDictionaryItemList();

		// 加载'借款信息'数据
		loadingBorrow();

		// 加载'借款人信息'
		loadingBorrowUserInfo();

		// 加载'借款人钱包信息'
		loadingUserWallet();

		// 加载'还款列表'
		loadingRepayment();

		// 加载'投标列表'
		loadingBid();

	});// $(function());

	/** 加载'数据字典项列表' **/
	function loadingSystemDictionaryItemList(){

		// 加载'数据字典'数据
		$.ajax({
			type: 'GET',
			url: 'http://localhost:8080/system/dictionaryItem/getAll',
			async: false,
			success: function (result) {

				// 如果返回的数据的响应码不是'成功(200)'
				if (result.code != 200) {
					$.messager.alert(result.msg);
					return;
				}

				// 如果返回的数据响应码为200
				// 将'数据字典项'集合放入全局变量中
				systemDictionaryItemList = result.data;

			}// success(result);

		});// $.ajax();

	}// loadingSystemDictionaryItemList();

	/** 加载'借款信息'数据 **/
	function loadingBorrow() {

		// 加载借款信息
		$.ajax({
			type: 'GET',
			async: false,
			url: 'http://localhost:8080/finance/borrow/get/' + borrowId,
			success: function (result) {

				// 如果返回的数据的响应码不是'成功(200)'
				if (result.code != 200) {
					$.messager.alert(result.msg);
					return;
				}


				// 如果返回的响应码正确，就进行数据填充
				let borrow = result.data;

				// 设置当前借款人id
				borrowUserId = borrow.borrowUserId;

				// 设置当前借款状态
				borrowState = borrow.borrowState;

				// 填充'借款信息'
				$('#title').text(borrow.title);
				$('#borrowUsername').text(borrow.borrowUsername);
				$('#borrowAmount').text(borrow.borrowAmount / MONEY_UNIT + '元');

				$('#yearRate').text(borrow.yearRate + '%');
				$('#repaymentMonth').text(borrow.repaymentMonth + '期');
				$('#repaymentType').text(REPAYMENT_TYPE[borrow.repaymentType]);
				$('#totalInterest').text(borrow.totalInterest / MONEY_UNIT + '元');

				// 投标总数
				$('#bidNum').text(borrow.bidNum);
				// 还需金额
				lastAmount = borrow.borrowAmount - borrow.currentBidAmount;
				$('#lastAmount').text( (lastAmount / MONEY_UNIT) + '元' );

				// 投标进度
				let bidPercent = (borrow.currentBidAmount / borrow.borrowAmount) * 100;
				$('#bidPercent').text( bidPercent + '%');
				$('#bidProgress').css('width', bidPercent + '%');

				// 借款状态
				$('#borrowState').text(BORROW_STATE[borrow.borrowState]);

				// 如果'借款审核状态'是'招标中'
				if( borrow.borrowState == BORROW_STATE_CONST.BIDDING ) {

					// 设置'截止日期'倒计时
					$('#bidDeadline').html('');
					$("#bidDeadline").flipcountdown({
						size:'xs',
						beforeDateTime: borrow.bidDeadline
					});

				}// if();

			}// success(result);

		});// $.ajax();

	}// loadingBorrow();

	/** 加载'借款人信息'数据 **/
	function loadingBorrowUserInfo() {

		// 加载个人信息
		$.ajax({
			type: 'GET',
			url: 'http://localhost:8080/user/userinfo/get/' + borrowUserId,
			async: false,
			success: function (result) {

				// 如果返回的数据的响应码不是'成功(200)'
				if (result.code != 200) {
					$.messager.alert(result.msg);
					return;
				}


				// 如果返回的响应码正确，就进行数据填充
				let userInfo = result.data;

				// 填充'个人信息'
				$('#realname').text(userInfo.realname == '' ? '暂无' : userInfo.realname);
				$('#idCardNumber').text(userInfo.idCardNumber == '' ? '暂无' : userInfo.idCardNumber);
				$('#phoneNumber').text(userInfo.phoneNumber == '' ? '暂无' : userInfo.phoneNumber);
				$('#createTime').text(userInfo.createTime);

				$('#incomingLevelId').text(getDictionaryValue(userInfo.incomeLevelId));
				$('#eduBackgroundId').text(getDictionaryValue(userInfo.eduBackgroundId));
				$('#houseConditionId').text(getDictionaryValue(userInfo.houseConditionId));

			}// success(result);

		});// $.ajax();

	}// loadingBorrowUserInfo();


	/** 加载'用户钱包信息'数据 **/
	function loadingUserWallet() {

		// 判断当前借款标状态是否处于'招标中'
		if( borrowState != BORROW_STATE_CONST.BIDDING) {
			// 如果借款状态不等于'招标中'，就无法进行'投标'操作，
			// 所以就只显示'借款标状态'
			$('#borrowState').show();
			return;

		}// if();

		// 判断当前用户是否已经登录
		let jsonUser = sessionStorage.getItem("user");
		// 如果用户没有登录
		if( !jsonUser ) {
			// 就显示'马上登录'按钮
			$('#btnLogin').show();
			return;
		}// if();

		// 如果用户已经登录，则解析出user对象，存储到全局user中
		user = JSON.parse(jsonUser);

		// 判断当前登录用户id和借款用户id是否相同
		if( user.id == borrowUserId ) {

			// 就显示标的审核状态 (自己无法投资自己的借款标的)
			$('#borrowState').show();
			return;
		}// if();


		// 如果当前登录用户id和借款用户id是不同的，
		// 则表示可以进行投资

		// 加载账户钱包
		$.post('http://localhost:8080/user/wallet/get/' + user.id, function (result) {

			// 如果返回的数据的响应码不是'成功(200)'
			if(result.code != 200) {
				$.messager.alert(result.msg);
				return;
			}


			// 如果返回的响应码正确，就进行数据填充
			// 将用户钱包信息存储到全局变量中
			userWallet = result.data;

			// 如果用户钱包可用余额低于'系统最小投资金额'
			if( userWallet.availableAmount < MINIMUM_BID_AMOUNT ) {

				$('#showBidAmount').attr({
					placeholder: '您的可用余额小于50元，无法进行标的投资！',
					readonly: true
				});

				$('#bidBtn').attr('disabled', 'disabled');

				return;
			}// if();


			// 如果用户钱包可用余额大于等于'系统最小投资金额'

			// 可投金额
			let canBidAmount = lastAmount;
			// 钱包可用余额
			let availableAmount = userWallet.availableAmount;

			// 如果'可投金额'大于'钱包可用余额'
			if( canBidAmount > userWallet.availableAmount ) {
				// 那么'可投金额'就等于'钱包可用余额'
				// 这样用于防止用户投资超额
				canBidAmount = availableAmount;
			}

			$('#showBidAmount').attr('placeholder', '请输入投标金额，可投金额：' + (canBidAmount / MONEY_UNIT) + '元');


			// '投资'表单验证
			$("#editForm").validate({
				rules:{
					showBidAmount:{
						required:true,
						number:true,
						max:canBidAmount / MONEY_UNIT,
						min: 50,
						integerMutiple: 50	// 50的整数倍
					}
				},
				messages:{
					showBidAmount:{
						required:"请输入投资金额",
						number:"请输入正确的投资金额",
						max:"投资金额不能超过{0}元",
						min:"投资金额必须大于{0}元",
						integerMutiple: "投资金额必须是{0}的整数倍"
					}
				},
				//自定义错误样式
				errorClass:"text-danger",
				// 未通过验证,进行高亮处理或其他处理；
				highlight:function(input){
					$(input).closest(".form-group").addClass("has-error");
				},
				// 通过验证,清除高亮效果或其他处理；
				unhighlight:function(input){
					$(input).closest(".form-group").removeClass("has-error");
				},
				// 验证成功后，提交操作；
				submitHandler:function(form){

					// 格式化货币单位为：分
					// 投资金额
					let bidAmount = $('#showBidAmount').val();
					$('#bidAmount').val(bidAmount * MONEY_UNIT);

					// 投资人id
					$('#bidUserId').val(user.id);
					// 投资人用户名
					$('#bidUsername').val(user.username);
					// 借款id
					$('#borrowId').val(borrowId);


					// '投资表单', 进行Ajax异步提交
					$("#editForm").ajaxSubmit(function(result){

						// 如果返回的数据的响应码不是'成功(200)'
						if (result.code != 200) {
							$.messager.alert(result.msg);
							return;
						}

						// 如果返回的响应码为'成功(200)'
						$.messager.confirm("提示","投标成功！",function(){
							window.location.reload();
						});

					});// $("#editForm").ajaxSubmit(function(data));

				}// submitHandler:function(form);
			});//  $("#editForm").validate();

			// 显示'投资'面板
			$('#editForm').show();


		});// $.post();


	}// loadingUserWallet();

	/** 加载'还款'数据 **/
	function loadingRepayment(){

		// 加载'还款记录'数据
		$.post('http://localhost:8080/finance/repayment/getByBorrowId', {

			borrowId: borrowId

		}, function (result) {

			// 如果返回的数据的响应码不是'成功(200)'
			if(result.code != 200) {
				$.messager.alert(result.msg);
				return;
			}

			// 如果返回的数据响应码为200
			// 就进行表格数据填充
			fillRepaymentTable( result.data );

		});// $.post();

	}// loadingRepayment();

	/** 填充表格数据 **/
	function fillRepaymentTable( listData ) {

		// 清空表格数据
		$('#tblRepayment tbody').empty();

		// 如果没有集合数据，就直接返回
		if( !listData || listData.length == 0 ){
			// 设置没有数据提示
			$('#tblRepayment tbody').html('<tr><td colspan="4" align="center"><p class="text-danger">暂时没有还款记录</p></td></tr>');
			return;
		}// if();

		// 循环构造单元格数据，并进行填充
		for( let i = 0; i < listData.length; i++ ) {

			let repayment = listData[i];

			// 还款金额
			let totalAmount = repayment.totalAmount / MONEY_UNIT;
			let tdTotalAmount = '<td class="text-primary">' + totalAmount + '元</td>';

			// 还款期数
			let tdPeriod = '<td>' + repayment.period + '期</td>';

			// 还款时间
			let tdRepaymentTime = '<td>' + repayment.repaymentTime + '</td>';

			// 还款状态
			let state = REPAYMENT_STATE[repayment.state];
			let tdState = '<td>' + state + '</td>';

			// 将构造好的单元格数据，填充到表格中
			$('#tblRepayment tbody').append('<tr>' + tdRepaymentTime + tdPeriod + tdTotalAmount + tdState + '</tr>');

		}// for();

	}// fillRepaymentTable( listData );

	/** 加载'投资'数据 **/
	function loadingBid(){

		// 加载'充值记录'数据
		$.post('http://localhost:8080/finance/bid/getByBorrowId/' + borrowId, function (result) {

			// 如果返回的数据的响应码不是'成功(200)'
			if(result.code != 200) {
				$.messager.alert(result.msg);
				return;
			}

			// 如果返回的数据响应码为200
			// 就进行表格数据填充
			let listData = result.data;

			// 填充表格数据
			fillBidTable( listData );

		});// $.post();


	}// loadingBid();

	/** 填充表格数据 **/
	function fillBidTable( listData ) {

		// 清空表格数据
		$('#tblBid tbody').empty();

		// 如果没有集合数据，就直接返回
		if( !listData || listData.length == 0 ){
			// 设置没有数据提示
			$('#tblBid tbody').html('<tr><td colspan="3" align="center"><p class="text-danger">暂时没有投标信息</p></td></tr>');
			return;
		}// if();

		// 循环构造单元格数据，并进行填充
		for( let i = 0; i < listData.length; i++ ) {

			let bid = listData[i];

			let tdBidUsername = '<td>' + bid.bidUsername + '</td>';

			// 投标金额
			let bidAmount = bid.bidAmount / MONEY_UNIT;
			let tdBidAmount = '<td>' + bidAmount + '元</td>';

			// 投标时间
			let tdBidTime = '<td>' + bid.bidTime + '</td>';

			// 将构造好的单元格数据，填充到表格中
			$('#tblBid tbody').append('<tr>' + tdBidUsername + tdBidAmount + tdBidTime + '</tr>');

		}// for();

	}// fillBidTable( var listData );

	/** 根据数据字典项id，获取数据字典值 **/
	function getDictionaryValue( id ) {

		// console.log('itemId:' + id);

		// console.log('systemDictionaryItemList.length:' + systemDictionaryItemList.length);

		for( let i = 0; i < systemDictionaryItemList.length; i++ ) {

			let tmpSystemDictionaryItem = systemDictionaryItemList[i];

			if( tmpSystemDictionaryItem.id == id )
				return tmpSystemDictionaryItem.value;

		}// for( let i = 0; i < systemDictionaryItemList.length; i++ );

		return '暂无';

	}// getDictionaryValue( id );
</script>
</html>